<template>
  <div class="smsUrl">
    <affix :label="$t('configLazyLoad.interfaceConfig.smsUrl')" style="padding-bottom: 8px;"></affix>
    <p style="padding-bottom: 12px;">{{$t('configLazyLoad.interfaceConfig.smsUrlTip1')}}</p>
    <configCompositionTwoWindowStyle :leftWidth="12" :rightWidth="12" :height="240">
      <template slot="card">
        <div style="margin-right: 20px;">
          <diyTable :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="del" @add="add"></diyTable>
        </div>
      </template>
      <template slot="detail">
        <div style="margin-left: 20px;" v-if="isShowDetail">
          <breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>
          <div class="callUrlDetail">
            <el-form :model="callUrlForm" label-position="top" label-width="120px">
              <el-form-item :label="$t('agentSetting.agentSetting43')" class="item">
                <el-input :maxlength=20 v-model.trim="callUrlForm.name" :placeholder="$t('public.pleaseInput')"></el-input>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.interfaceConfig.interfaceUrl')" class="item">
                <el-input v-model.trim="callUrlForm.url" :placeholder="$t('public.pleaseInput')"></el-input>
                <p style="font-size: 12px;">
                  <span>{{$t('configLazyLoad.interfaceConfig.smsUrlTip2')}}</span>
                  <a target="_blank" href="https://developer.7moor.com/v2docs/sms/">{{$t('configLazyLoad.interfaceConfig.viewDocument')}}</a>
                </p>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.interfaceConfig.pushType')" class="item">
                <el-select v-model="callUrlForm.method" :placeholder="$t('public.pleasePick')">
                  <el-option label="GET" value="GET"></el-option>
                  <el-option label="POST" value="POST"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-button type="primary" class="primary_btn" @click="addCallUrl">{{$t('public.save')}}</el-button>
          </div>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>
<script>
  import Affix from '../../../../ui-modules/affix/Affix.vue'
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import diyTable from '../base/diyTable'
  export default {
    name: 'smsUrl',
    data () {
      return {
        titleArr: [this.$t('configLazyLoad.interfaceConfig.smsUrlList'), this.$t('configLazyLoad.interfaceConfig.addInterfacePage')],
        addOrEdit: 'add',
        isShowDetail: false,
        callUrlType: [],
        tableHeader: [
          {prop: 'name', label: this.$t('agentSetting.agentSetting43')},
          {prop: 'url', label: this.$t('configLazyLoad.interfaceConfig.interfaceUrl')},
          {prop: 'method', label: this.$t('configLazyLoad.interfaceConfig.pushType')},
          {prop: 'operate', label: this.$t('public.operate')}
        ],                        //   自定义 表头
        tableData: [],
        callUrlForm: {
          name: '',
          url: 'http://',
          method: 'GET'
        }
      }
    },
    methods: {
      fetchData () {
        this.$store.dispatch('querySmsInterfaceFields', {}).then(res => {
          if (res && res.success) {
            this.tableData = res.data
          }
        })
      },
      add () {
        if (this.tableData.length >= 5) {
          this.$message.error(this.$t('configLazyLoad.interfaceConfig.smsUrlTip3'))
          return
        }
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.addInterfacePage'))
        this.addOrEdit = 'add'
        this.isShowDetail = true
        this.callUrlForm.name = ''
        this.callUrlForm.method = 'GET'
        this.callUrlForm.url = 'http://'
      },
      back () {
        this.isShowDetail = false
      },
      addCallUrl () {
        let data = this.callUrlForm
        if (data.name === '') {
          this.$message.error(this.$t('configLazyLoad.interfaceConfig.descEmpty'))
          return
        }
        let rep = new RegExp(/^((http|ftp|https):\/\/)(([a-zA-Z0-9._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9&%_./-~-]*)?/)
        if (!rep.test(data.url)) {
          this.$message.error(this.$t('configLazyLoad.interfaceConfig.urlIncorrect'))
          return
        }
        if (this.addOrEdit === 'add') {
          delete data._id
          this.$store.dispatch('addSmsInterfaceFields', data).then(res => {
            if (res && res.success) {
              this.fetchData()
              this.isShowDetail = false
            }
          })
        } else {
          this.$store.dispatch('editSmsInterfaceFields', data).then(res => {
            if (res && res.success) {
              this.fetchData()
              this.isShowDetail = false
            }
          })
        }
      },
      updata (val) {
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.editInterfacePage'))
        this.addOrEdit = 'edit'
        this.isShowDetail = true
        this.callUrlForm._id = val._id
        this.callUrlForm.name = val.name
        this.callUrlForm.method = val.method
        this.callUrlForm.url = val.url
      },
      del (val) {
        let data = {}
        data._id = val._id
        this.$confirm(this.$t('configLazyLoad.interfaceConfig.smsUrlTip4'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delSmsInterfaceFields', data).then(res => {
            if (res && res.success) {
              this.fetchData()
              this.$message({
                message: this.$t('configLazyLoad.interfaceConfig.deleteSucc'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      }
    },
    components: {
      Affix,
      configCompositionTwoWindowStyle,
      diyTable,
      breadCrumb
    },
    beforeMount () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .smsUrl
    padding 20px
    .callUrlDetail
      padding 20px
      .el-input,.el-select
        max-width 220px
    .item
      margin-bottom 20px
</style>




















